iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 30
1
Modern Web

從零開始的Angular前端開發系列 第 30

# DAY 30 Git 基本操作

  • 分享至 

  • xImage
  •  

相信大家開發 Angular 時,難免都會遇到修修改改,以及版本管理上的問題,如果很多人一起開發一個專案,需要同時開發好幾個功能時,又不知道要怎麼整合每個人各自開發的程式。今天我們來介紹,個人開發或團隊開發都很好用的版本控管工具 - Git。

安裝 Git

若你是使用 Windows 系統,請到 Git官網 下載Git。

若你是使用 linux 系統,可以用 command 安裝:
Ubuntu or Debian:

sudo apt install git

or CentOS:

sudo yum install git

安裝的 command 視你的作業系統所搭配的套件管理工具而定。

Windows 系統安裝過程基本上都用預設設定就好,注意這個地方的 Git Bash Here, 有勾選,就可以滑鼠右鍵開啟 git 的 bash 視窗,會比較方便一些。

安裝完 git 之後,我們要到創建遠端的 repository,比較主流的有 GithubGitLab,依個人喜好選擇,差別只在於他們是屬於不同的遠端儲存庫,git 的 command 基本上不會差太多。

這邊我常用的是 Github

創建 repository

New 創建一個 repository。

輸入目錄的名字,以及下面設定這個目錄要不要公開,設定 private 的話,就只有自己和你邀請的人,可以看這個目錄的內容。最下面的區塊兩個都選 None 即可,也不需要新增 README,因為 Angular 在建立專案時,都已經幫我們做好了。
由於我這邊已經創建過這個目錄了,就不能再創同樣名字的目錄。

創建完目錄後會看到這個畫面:

這個地方就是你 git 目錄的位址。

Github 有提供一些懶人指令,那由於 Angular 已經幫我們建好.git 資料夾等等檔案,我們直接用下面的 command,push一個已經存在的目錄。

切換到專案資料夾,也就是有 .git 那層的地方,滑鼠右鍵選 Git Bash Here

然後貼上剛剛的兩條指令,就可以把目錄推上 repository 了:

第一行指令是告訴 git repository 的位置,這個位置會被存起來,以後要 push、pull 等操作時,就會知道要去找哪個 repository。

第二行指令就是 push,就是把檔案都推上雲端。

git remote add origin https://github.com/fansen7/Sponge.git
git push -u origin master

回去重新整理一下頁面,就可以看到專案的內容檔案,當然 .gitignore 裡面紀錄的檔案,都被我們過濾掉了:

常用指令

接下來是開發時會常用的指令。

複製整個專案到本機。

git clone <repository>

查看 git 紀錄:

git log 

新增檔案到 Commit Tree:

git add <filename>

commit 指令 ,<Commit message>可以填入你這次大概更新了甚麼內容:

git commit -m "<Commit message>"

最後將 commit 的檔案推上 repository:

git push

當 repository 更新時,用 pull 來更新本地的檔案:

git pull

那平常我都是用下面的懶人指令來更新遠端的檔案:

git add .
git commit -m "<Commit message>"
git push

git add . 就是把所有檔案都加入 commit tree,其他的指令則是跟上面介紹的一樣。

Push 時遇到的問題

那麼由於我是將目錄設為 Private,所以第一次 push 時,有可能遇到這個問題:

解決方法就是將其中一個模組重新安裝,就可以重新輸入帳號資訊。
參考自:https://www.itread01.com/content/1542563669.html


上一篇
# DAY 29 圖表
系列文
從零開始的Angular前端開發30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
阿展展展
iT邦好手 1 級 ‧ 2020-01-17 09:11:14

恭喜完賽 好龐大的 Angular /images/emoticon/emoticon06.gif

我要留言

立即登入留言